<template>
  <div class="app-container">
    <!-- 医院评价 -->
    <div v-if="list.projectOrderId==0">
      <h5 class="titleInfo">医院评价</h5>
      <el-form label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="医院名称">
              <span
                v-if="list.hospitalsComment"
                class="spanToInput"
              >{{list.hospitalsComment.name | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医院评价">
              <span
                v-if="list.hospitalsComment"
                class="spanToInput"
              >{{list.hospitalsComment.contents | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评星">
              <span class="rateSpan">服务</span>
              <el-rate
                v-if="list.hospitalsComment"
                class="rateClass"
                :texts="starTxt"
                v-model="list.hospitalsComment.serveStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">环境</span>
              <el-rate
                class="rateClass"
                v-if="list.hospitalsComment"
                :texts="starTxt"
                v-model="list.hospitalsComment.envStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">关怀</span>
              <el-rate
                class="rateClass"
                v-if="list.hospitalsComment"
                :texts="starTxt"
                v-model="list.hospitalsComment.careStar"
                show-text
              ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 管家评价 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">管家评价</h5>
      <el-form label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="管家名称">
              <span
                v-if="list.butlerComment"
                class="spanToInput"
              >{{list.butlerComment.name | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="管家评价">
              <span
                v-if="list.butlerComment"
                class="spanToInput"
              >{{list.butlerComment.contents | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评星">
              <span class="rateSpan">服务</span>
              <el-rate
                v-if="list.butlerComment"
                class="rateClass"
                :texts="starTxt"
                v-model="list.butlerComment.serveStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">态度</span>
              <el-rate
                v-if="list.butlerComment"
                class="rateClass"
                :texts="starTxt"
                v-model="list.butlerComment.attitudeStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">响应</span>
              <el-rate
                class="rateClass"
                v-if="list.butlerComment"
                :texts="starTxt"
                v-model="list.butlerComment.responseStar"
                show-text
              ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 医生评价 -->
      <div class="divBar"></div>
      <h5 class="titleInfo">医生评价</h5>
      <el-form label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="医生名称">
              <span
                v-if="list.doctorComment"
                class="spanToInput"
              >{{list.doctorComment.name | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医生评价">
              <span
                v-if="list.doctorComment"
                class="spanToInput"
              >{{list.doctorComment.contents | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评星">
              <span class="rateSpan">服务</span>
              <el-rate
                class="rateClass"
                v-if="list.doctorComment"
                :texts="starTxt"
                v-model="list.doctorComment.serveStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">效果</span>
              <el-rate
                class="rateClass"
                v-if="list.doctorComment"
                :texts="starTxt"
                v-model="list.doctorComment.effectStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">专业</span>
              <el-rate
                class="rateClass"
                v-if="list.doctorComment"
                :texts="starTxt"
                v-model="list.doctorComment.professionStar"
                show-text
              ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-else>
      <h5 class="titleInfo">医院评价</h5>
      <el-form label-width="130px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="项目名称">
              <span v-if="list" class="spanToInput">{{list.projectName | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医院名称">
              <span v-if="list" class="spanToInput">{{list.hospitalName | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="医院评价">
              <span v-if="list" class="spanToInput">{{list.contents | filterNull}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="评星">
              <span class="rateSpan">手术效果</span>
              <el-rate
                v-if="list.effectStar"
                class="rateClass"
                :texts="starTxt"
                v-model="list.effectStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">管家服务</span>
              <el-rate
                class="rateClass"
                v-if="list.serveStar"
                :texts="starTxt"
                v-model="list.serveStar"
                show-text
              ></el-rate>
              <br />
              <span class="rateSpan">医院环境</span>
              <el-rate
                class="rateClass"
                v-if="list.hospitalStar"
                :texts="starTxt"
                v-model="list.hospitalStar"
                show-text
              ></el-rate>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 评论图片 -->
    <div class="divBar"></div>
    <h5 class="titleInfo">评论图片</h5>
    <el-form ref="list" :inline="true" :model="list" label-width="130px">
      <div v-if="list.images">
        <img v-for="(i,index) in list.images" :key="index" class="imgs" :src="i | imgs" alt />
      </div>
    </el-form>
  </div>
</template>
<script>
import { getBeautyProjectOrderCommentById } from "@/api/itemEvaluate";
export default {
  name: "itemEvaluateInfo",
  data() {
    return {
      starTxt: ["1星", "2星", "3星", "4星", "5星"],
      star: 5,
      userId: "",
      list: {}
    };
  },
  filters: {
    filterNull(e) {
      if (!e) {
        return "暂无";
      } else {
        return e;
      }
    },
    imgs(e) {
      return e.indexOf("http") > -1
        ? e
        : localStorage.getItem("imgUrlPrefix") + "/" + e;
    }
  },
  mounted() {
    this.userId = Number(this.$route.query.userId);
    this.getList();
  },
  methods: {
    getList() {
      let datas = { id: this.userId };
      getBeautyProjectOrderCommentById(datas)
        .then()
        .then(res => {
          console.log(res);
          if (!res.data.code) {
            this.list = res.data.data;
            this.list.images = this.list.images.split(",");
            // console.log(this.list.images)
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 0px !important;
}
.form {
  margin-left: 268px;
}
.rateClass {
  margin-top: 8px;
  float: left;
}
.rateSpan {
  float: left;
  padding: 0 4px;
  color: #606266;
}
.imgs {
  margin-left: 20px;
  width: 180px;
  margin-bottom: 20px;
}
</style>